<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>志愿者服务网后台管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/login.css">
    <style>
        .ly-input img {
            cursor: pointer
        }
    </style>
</head>
<body class="layui-f">
<div class="layui-anim layui-anim-up login-main" id="form-main">
    <form class="layui-form" action="" method="post">
        <h3>志愿者服务网后台管理</h3>
        <div class="ly-input">
            <input type="text" name="userID" required lay-verify="required|uLen" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
        <div class="ly-input">
            <input type="password" name="userPwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="ly-input">
            <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" maxlength="4"  class="layui-input" style="width: 110px;float: left;">
            <img src="code.php" onclick="this.src='code.php?rand='+Math.random()">
        </div>
        <div class="ly-input">
            <button class="layui-btn ly-submit" id="ly-submit" lay-submit lay-filter="formDemo">登录</button>
        </div>
    </form>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/login.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,form = layui.form;
        //自定义验证规则
        form.verify({
            uLen: function (value, item) {
                if (value.length < 3) {
                    return "长度不能小于3位!";
                }
            }
        })
        form.on('submit(formDemo)', function (data) {
            $('#ly-submit').submit();
        });
    });
</script>
</body>
</html>